<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>首页</title>
		<link rel="shortcut icon" type="image/x-icon" href="../../yjzh-img/main/logo.ico" media="screen" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-plugins/font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-plugins/ali-icon/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/all-page.css" />
		<link rel="stylesheet" type="text/css" href="../../yjzh-css/index.css" />
	</head>

	<body>
		<!--最外层盒子-->
		<div class="max-box">
			<!--头部盒子外层开始-->
			<div class="top-box clear">
				<img class="logo-icon" src="../../yjzh-img/main/logo-icon.png" />
				<span class="logo-title">应急指挥调度平台</span>
				<img class="logo-leaf" src="../../yjzh-img/main/top-leaf.png" />
				<ul class="user-list">
					<li>
						<a><i class="fa fa-power-off color-dark-blue font-size-16px" aria-hidden="true"></i><span class="color-dark-blue">&nbsp;&nbsp;退出</span></a>
					</li>
					<li>
						<a><i class="fa fa-user color-dark-blue font-size-16px" aria-hidden="true"></i><span class="color-dark-blue">&nbsp;&nbsp;您好，用户名</span></a>
					</li>
				</ul>
			</div>
			<!--头部盒子外层结束-->

			<!--左侧菜单外层盒子开始-->
			<div class="left-box">
				<!--左侧菜单内层盒子开始-->
				<div class="left-inner-box bg-black-blue">
					<!--收起菜单按钮样式开始-->
					<div class="pack-up-box">
						<i class="fa fa-bars color-white font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span class="color-white">收起菜单</span>
					</div>
					<!--收起菜单按钮样式结束-->
					<!--一级菜单开始-->
					<ul class="left-level1-list">
						<li class="checked-level1">
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
							<!--二级菜单开始-->
							<ul class="left-level2-list">
								<li class="checked-level2">
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
							</ul>
							<!--二级菜单结束-->
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
							<!--二级菜单开始-->
							<ul class="left-level2-list">
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
								<li>
									<a><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单二</span></a>
								</li>
							</ul>
							<!--二级菜单结束-->
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
						<li>
							<a class="checked-level1-cell"><i class="fa fa-newspaper-o font-size-18px" aria-hidden="true"></i>&nbsp;&nbsp;<span>我是菜单一</span></a>
						</li>
					</ul>
					<!--一级菜单结束-->
				</div>
				<!--左侧菜单内层盒子结束-->
			</div>
			<!--左侧菜单外层盒子结束-->

			<!--右侧内容外层盒子开始-->
			<div class="right-box">
				<!--右侧内容内层盒子开始-->
				<div class="right-inner-box">
					<!--面包屑开始-->
					<div class="top-nav-box">
						<div class="nav-title">
							<a class="color-black-gray">首页</a><span>&nbsp;>&nbsp;</span>
							<a class="color-black-gray">多媒体报警</a><span>&nbsp;>&nbsp;</span>
							<a class="color-dark-blue">多屏指挥</a>
						</div>
						<div class="right-time"></div>
					</div>
					<!--面包屑结束-->
					<!--主要内容外层盒子开始-->
					<div class="content-box">
						<!--主要内容内层盒子开始-->
						<div class="content-inner-box">
							<!--聊天框与警情最外层盒子开始-->
							<div class="chatting-and-form">

								<!--聊天外层盒子开始-->
								<div class="chatting-max-box">
									<!--分部标题开始-->
									<div class="part-title-box">
										<div class="part-title color-dark-blue border-dark-blue">
											聊天窗口
										</div>
									</div>
									<!--分部标题结束-->
									<!--聊天内容外层盒子开始-->
									<div class="chatting-content-box">
										<div class="chatting-content-inner-box">
											<!--聊天内容内层盒子开始-->
											<div class="chatting-inner-box">
												<div class="center-box">
													<p>2017/6/20 19:30:54</p>
													<span>张三  加入聊天</span>
												</div>
												<div class="left-chatting-box">
													<span class="left-head-img">
														<img src="../../yjzh-img/other/bjr.jpg"/>
													</span>
													<div class="left-name">
														我是姓名
													</div><br/>
													<div class="speech left" ng-class="speech left">
														我发现前面有一起多人打架事故 我发现前面有一起多人打架事故
													</div>
												</div>

												<div class="right-chatting-box">
													<span class="right-head-img">
														<img src="../../yjzh-img/other/jjr.jpg"/>
													</span>
													<div class="right-name">
														我是姓名
													</div><br/>
													<div class="speech right" ng-class="speech left">
														我发现前面有一起多人打架事故 我发现前面有一起多人打架事故
														<img class="sending-img" src="../../yjzh-img/main/sending.gif" />
													</div>
												</div>

												<div class="left-chatting-box">
													<span class="left-head-img">
														<img src="../../yjzh-img/other/bjr.jpg"/>
													</span>
													<div class="left-name">
														我是姓名
													</div><br/>
													<div class="speech left" ng-class="speech left">
														我发现前面有一起多人打架事故 我发现前面有一起多人打架事故
													</div>
												</div>

												<div class="right-chatting-box">
													<span class="right-head-img">
														<img src="../../yjzh-img/other/jjr.jpg"/>
													</span>
													<div class="right-name">
														我是姓名
													</div><br/>
													<div class="speech right" ng-class="speech left">
														我发现前面有一起多人打架事故 我发现前面有一起多人打架事故
														<img class="send-again" src="../../yjzh-img/main/again.png" />
													</div>
												</div>

												<div class="left-chatting-box">
													<span class="left-head-img">
														<img src="../../yjzh-img/other/bjr.jpg"/>
													</span>
													<div class="left-name">
														我是姓名
													</div><br/>
													<div class="img-speech left">
														<img class="send-emo-img" src="../../yjzh-img/emo/bzwcrw.gif" />
													</div>
												</div>
												<div class="right-chatting-box">
													<span class="right-head-img">
														<img src="../../yjzh-img/other/jjr.jpg"/>
													</span>
													<div class="right-name">
														我是姓名
													</div><br/>
													<div class="img-speech right">
														<img class="send-emo-img" src="../../yjzh-img/emo/bzwcrw.gif" />
													</div>
												</div>
											</div>
											<!--聊天内容内层盒子结束-->
											<!--附加功能样式盒子开始-->
											<div class="additional-function-box">
												<div class="additional-function-inner-box">
													<span class="emo-btn" data-num="0" onclick="emo_click(this, event)"><i class="icon iconfont icon-xuanzebiaoqing"></i></span>
													<span class="exp-btn" data-num="0" onclick="exp_click(this, event)"><i class="icon iconfont icon-xuanzechangyongyu"></i></span>
													<!--表情包外层盒子开始-->
													<div class="emoticons-box shadow clear">
														<div class="emoticons-img" onclick="send_emo(this, event)">
															<img class="gif-img" title="保证完成任务" src="../../yjzh-img/emo/bzwcrw.gif" />
															<img class="show-img" src="../../yjzh-img/emo/bzwcrw.png" />
														</div>
														<div class="emoticons-img" onclick="send_emo(this, event)">
															<img class="gif-img" title="搞定" src="../../yjzh-img/emo/gd.gif" />
															<img class="show-img" src="../../yjzh-img/emo/gd.png" />
														</div>
														<div class="emoticons-img" onclick="send_emo(this,event)">
															<img class="gif-img" title="敬礼" src="../../yjzh-img/emo/jl.gif" />
															<img class="show-img" src="../../yjzh-img/emo/jl.png" />
														</div>
														<div class="emoticons-img" onclick="send_emo(this,event)">
															<img class="gif-img" title="立刻出发" src="../../yjzh-img/emo/lkcf.gif" />
															<img class="show-img" src="../../yjzh-img/emo/lkcf.png" />
														</div>
														<div class="emoticons-img" onclick="send_emo(this,event)">
															<img class="gif-img" title="密切观察" src="../../yjzh-img/emo/mqgz.gif" />
															<img class="show-img" src="../../yjzh-img/emo/mqgz.png" />
														</div>
														<div class="emoticons-img" onclick="send_emo(this,event)">
															<img class="gif-img" title="同志们辛苦了" src="../../yjzh-img/emo/tzmxkl.gif" />
															<img class="show-img" src="../../yjzh-img/emo/tzmxkl.png" />
														</div>
														<div class="emoticons-img" onclick="send_emo(this,event)">
															<img class="gif-img" title="在途中" src="../../yjzh-img/emo/ztz.gif" />
															<img class="show-img" src="../../yjzh-img/emo/ztz.png" />
														</div>
														<div class="emoticons-img" onclick="send_emo(this,event)">
															<img class="gif-img" title="注意安全" src="../../yjzh-img/emo/zyaq.gif" />
															<img class="show-img" src="../../yjzh-img/emo/zyaq.png" />
														</div>
													</div>
													<!--表情包外层盒子结束-->
													<!--常用语外层盒子开始-->
													<div class="expressions-box">
														<div class="phrase">您好</div>
														<div class="phrase">不要关闭软件</div>
														<div class="phrase">警方已出警，请耐心等待</div>
														<div class="phrase">我们会尽快解决您的问题</div>
														<div class="phrase">666</div>
														<div class="phrase">现场情况如何</div>
														<div class="phrase">是否已经到达</div>
													</div>
													<!--常用语外层盒子结束-->
												</div>
											</div>
											<!--附加功能样式盒子结束-->
											<!--输入框外层盒子开始-->
											<div class="chatting-input-box">
												<div class="chatting-input">
													<textarea class="chatting-text" name="" rows="" cols="" placeholder="请输入"></textarea>
												</div>
												<button class="send-btn">发&nbsp;送</button>
											</div>
											<!--输入框外层盒子结束-->
											<!--<div class="always-chatting clear">
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
												<div class="phrase">请描述一下案发的情况</div>
											</div>-->
										</div>
									</div>
									<!--聊天内容外层盒子结束-->
								</div>
								<!--聊天外层盒子结束-->
								<!--警情外层盒子开始-->
								<div class="sirens-box">
									<!--警情信息开始-->
									<div class="sirens-message-box">
										<!--分部标题开始-->
										<div class="part-title-box">
											<div class="part-title color-green border-green">
												警单信息
											</div>
											<span class="look-dispatch-personnel-btn color-white bg-blue">查看派遣人员</span>
										</div>
										<!--分部标题结束-->
										<!--警情信息内容盒子开始-->
										<div class="sirens-content-box">
											<div class="form-box clear">
												<div class="cell-div">
													<span>任务名称</span>
													<input type="text" name="" id="" value="" placeholder="请输入" />
												</div>
												<div class="cell-div">
													<span>警情类别</span>
													<select name="">
														<option value="">刑事警情</option>
													</select>
												</div>
												<div class="cell-div">
													<span>警情级别</span>
													<select name="">
														<option value="">一级警情</option>
													</select>
												</div>
												<div class="cell-div textarea-div">
													<span>事发地址</span>
													<input type="text" name="" id="" value="" placeholder="请输入" />
												</div>
												<div class="cell-div textarea-div vertical-webkit-baseline-middle">
													<span>警情描述</span>
													<textarea name="" rows="" cols="" placeholder="请输入"></textarea>
												</div>
											</div>

											<div class="center-button-box">
												<button class="button1 color-green border-green">取消</button>
												<button class="button1 color-white bg-green border-green">确定</button>
											</div>
										</div>
										<!--警情信息内容盒子结束-->
									</div>
									<!--警情信息结束-->
									<!--派遣人员开始-->
									<div class="sirens-message-box dispatch-personnel-box">
										<!--分部标题开始-->
										<div class="part-title-box">
											<div class="part-title color-blue border-blue">
												派遣人员
											</div>
										</div>
										<!--分部标题结束-->
										<!--派遣人员名单开始-->
										<div class="dispatch-personnel-list clear">
											<div class="dispatch-personnel">
												张三-13586458956-桥西区维明大街派出所
											</div>
											<div class="dispatch-personnel">
												张三-13586458956-维明大街派出所
											</div>
										</div>
										<!--派遣人员名单结束-->
									</div>
									<!--派遣人员结束-->
								</div>
								<!--警情外层盒子结束-->
								<!--警情详情开始-->
								<div class="sirens-detail-box">
									<!--分部标题开始-->
									<div class="part-title-box">
										<div class="part-title color-orange border-orange">
											警单详情
										</div>
									</div>
									<!--分部标题结束-->
									<div class="sirens-detail-list-box">
										<!--警单详情列表外层盒子开始-->
										<ul class="sirens-detail-list">
											<!--第一列开始-->
											<li>
												<p class="color-dark-blue">李警官</p>
												<p class="color-dark-gray">2017-09-20&nbsp;&nbsp;19:10:30</p>
												<p>现场情况已控制！</p>
												<!--多媒体外层盒子开始-->
												<div class="multimedia-box clear">
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="multimedia-video-box">
															<img src="../../yjzh-img/other/icon_play.png" />
															<video width="210" height="120" controls="controls" hidden="hidden">
																<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
																当前浏览器不支持 video直接播放，点击这里下载视频：
																<a href="myvideo.webm">下载视频</a>
															</video>
														</div>
													</div>
													<!--多媒体盒子结束-->
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<!--多媒体盒子结束-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
												</div>
												<!--多媒体外层盒子结束-->
											</li>
											<!--第一列结束-->
											<!--第一列开始-->
											<li>
												<p class="color-dark-blue">李警官</p>
												<p class="color-dark-gray">2017-09-20&nbsp;&nbsp;19:10:30</p>
												<p>现场情况已控制！</p>
												<!--多媒体外层盒子开始-->
												<div class="multimedia-box clear">
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="multimedia-video-box">
															<img src="../../yjzh-img/other/icon_play.png" />
															<video width="210" height="120" controls="controls" hidden="hidden">
																<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
																当前浏览器不支持 video直接播放，点击这里下载视频：
																<a href="myvideo.webm">下载视频</a>
															</video>
														</div>

													</div>
													<!--多媒体盒子结束-->
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<!--多媒体盒子结束-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
												</div>
												<!--多媒体外层盒子结束-->
											</li>
											<!--第一列结束-->
											<!--第一列开始-->
											<li>
												<p class="color-dark-blue">李警官</p>
												<p class="color-dark-gray">2017-09-20&nbsp;&nbsp;19:10:30</p>
												<p>现场情况已控制！</p>
												<!--多媒体外层盒子开始-->
												<div class="multimedia-box clear">
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="multimedia-video-box">
															<img src="../../yjzh-img/other/icon_play.png" />
															<video width="210" height="120" controls="controls" hidden="hidden">
																<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
																当前浏览器不支持 video直接播放，点击这里下载视频：
																<a href="myvideo.webm">下载视频</a>
															</video>
														</div>

													</div>
													<!--多媒体盒子结束-->
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<!--多媒体盒子结束-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
												</div>
												<!--多媒体外层盒子结束-->
											</li>
											<!--第一列结束-->
											<!--第一列开始-->
											<li>
												<p class="color-dark-blue">李警官</p>
												<p class="color-dark-gray">2017-09-20&nbsp;&nbsp;19:10:30</p>
												<p>现场情况已控制！</p>
												<!--多媒体外层盒子开始-->
												<div class="multimedia-box clear">
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="multimedia-video-box">
															<img src="../../yjzh-img/other/icon_play.png" />
															<video width="210" height="120" controls="controls" hidden="hidden">
																<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
																当前浏览器不支持 video直接播放，点击这里下载视频：
																<a href="myvideo.webm">下载视频</a>
															</video>
														</div>

													</div>
													<!--多媒体盒子结束-->
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<!--多媒体盒子结束-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
												</div>
												<!--多媒体外层盒子结束-->
											</li>
											<!--第一列结束-->
											<!--第一列开始-->
											<li>
												<p class="color-dark-blue">李警官</p>
												<p class="color-dark-gray">2017-09-20&nbsp;&nbsp;19:10:30</p>
												<p>现场情况已控制！</p>
												<!--多媒体外层盒子开始-->
												<div class="multimedia-box clear">
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="multimedia-video-box">
															<img src="../../yjzh-img/other/icon_play.png" />
															<video width="210" height="120" controls="controls" hidden="hidden">
																<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
																当前浏览器不支持 video直接播放，点击这里下载视频：
																<a href="myvideo.webm">下载视频</a>
															</video>
														</div>

													</div>
													<!--多媒体盒子结束-->
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<!--多媒体盒子结束-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
												</div>
												<!--多媒体外层盒子结束-->
											</li>
											<!--第一列结束-->
											<!--第一列开始-->
											<li>
												<p class="color-dark-blue">李警官</p>
												<p class="color-dark-gray">2017-09-20&nbsp;&nbsp;19:10:30</p>
												<p>现场情况已控制！</p>
												<!--多媒体外层盒子开始-->
												<div class="multimedia-box clear">
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="multimedia-video-box">
															<img src="../../yjzh-img/other/icon_play.png" />
															<video width="210" height="120" controls="controls" hidden="hidden">
																<source src="../../yjzh-img/other/mov_bbb.mp4" type="video/mp4"></source>
																当前浏览器不支持 video直接播放，点击这里下载视频：
																<a href="myvideo.webm">下载视频</a>
															</video>
														</div>
													</div>
													<!--多媒体盒子结束-->
													<!--多媒体盒子开始-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<!--多媒体盒子结束-->
													<div class="multimedia-div">
														<div class="audio-box">
															<img src="../../yjzh-img/other/icon_voice.png" />
															<p class="color-dark-gray">15″</p>
															<audio hidden="hidden">
																<source src="../../yjzh-img/other/horse.mp3" type="audio/mpeg"> 您的浏览器不支持音频
															</audio>
														</div>
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
													<div class="multimedia-div">
														<img src="../../yjzh-img/other/img_01.jpg" />
													</div>
												</div>
												<!--多媒体外层盒子结束-->
											</li>
											<!--第一列结束-->
										</ul>
										<!--警单详情列表外层盒子结束-->
									</div>
								</div>
								<!--警情详情结束-->
							</div>
							<!--聊天框与警情最外层盒子结束-->
						</div>
						<!--主要内容内层盒子结束-->
					</div>
					<!--主要内容外层盒子结束-->
				</div>
				<!--右侧内容内层盒子结束-->
			</div>
			<!--右侧内容外层盒子结束-->
		</div>
		<div class="float-window-top float-window ">我是弹窗</div>
	</body>
	<script src="../../yjzh-plugins/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-js/index.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../yjzh-js/other.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//鼠标悬浮表情包时的样式
		$(".emoticons-img").mouseover(function() {
			$(this).children(".gif-img").css("display", "block");
			$(this).children(".show-img").css("display", "none");
		});

		$(".emoticons-img").mouseout(function() {
			$(this).children(".gif-img").css("display", "none");
			$(this).children(".show-img").css("display", "block");
		});

		//点击出现表情包
		function emo_click(obj,event) {
			event.stopPropagation();

			if($(obj).attr("data-num") == 0) {

				$(".expressions-box").css("display", "none");
				$(".exp-btn").attr("data-num", "0");
				$(".exp-btn").children('i').css("color", "#696969");

				$(".emoticons-box").css("display", "block");
				$(obj).attr("data-num", "1");
				$(obj).children('i').css("color", "#1b92e5");

			} else {

				$(".emoticons-box").css("display", "none");
				$(obj).attr("data-num", "0");
				$(obj).children('i').css("color", "#696969");
			}
		}

		//常用语出现
		function exp_click(obj,event) {
			event.stopPropagation();

			if($(obj).attr("data-num") == 0) {

				$(".emoticons-box").css("display", "none");
				$(".emo-btn").attr("data-num", "0");
				$(".emo-btn").children('i').css("color", "#696969");
				
				$(".expressions-box").css("display", "block");
				$(obj).attr("data-num", "1");
				$(obj).children('i').css("color", "#1b92e5");

			} else {

				$(".expressions-box").css("display", "none");
				$(obj).attr("data-num", "0");
				$(obj).children('i').css("color", "#696969");
			}
		}

		//页面加载的时候保证滚动条在最底部
		$(".chatting-inner-box").scrollTop($(".chatting-inner-box")[0].scrollHeight);

		//点击图片发送图片
		function send_emo(obj,event) {
			event.stopPropagation();
			var img_src = $(obj).children(".gif-img").attr("src");

			var html = '<div class="right-chatting-box"><span class="right-head-img"><img src="../../yjzh-img/other/jjr.jpg"/></span>';
			html += '<div class="right-name">我是姓名</div><br/>';
			html += '<div class="img-speech right"><img class="send-emo-img" src="' + img_src + '"/></div></div>';

			$(".chatting-inner-box").append(html);

			$(".emoticons-box").css("display", "none"); //隐藏表情包
			$(".emo-btn").attr("data-num", "0"); //修改表情包按钮的状态
			$(".emo-btn").children('i').css("color", "#696969"); //修改表情包按钮的样式
			$(".chatting-inner-box").scrollTop($(".chatting-inner-box")[0].scrollHeight); //让滚动条到底部
		}
		
		$(".phrase").on("click",function(event){
			
			$(".phrase").removeClass("phrase-check");
			$(this).addClass("phrase-check");
			
			event.stopPropagation();
			var str = $(this).text();
			$(".chatting-text").val(str);
			
			$(".expressions-box").css("display", "none");
			$(".exp-btn").attr("data-num", "0");
			$(".exp-btn").children('i').css("color", "#696969");
			
			
		});
			
		//点击空白处隐藏常用语和表情包
		$("body").click(function() {
			$(".emoticons-box").css("display", "none");
			$(".emo-btn").attr("data-num", "0");
			$(".emo-btn").children('i').css("color", "#696969");
			$(".expressions-box").css("display", "none");
			$(".exp-btn").attr("data-num", "0");
			$(".exp-btn").children('i').css("color", "#696969");
		});

		$(".multimedia-div").on("click", ".audio-box", function() {
			$(".audio-box").find("img").attr("src", "../../yjzh-img/other/icon_voice.png");

			$(this).find("img").attr("src", "../../yjzh-img/other/icon_voice.gif");
			$(this).find("audio").trigger('play');
		});

		$(".audio-box audio").bind('ended', function() {
			$(this).parent().find("img").attr("src", "../../yjzh-img/other/icon_voice.png");
		});

		//鼠标悬浮的时候出现的弹窗问题
		var x_center, y;
		$(".multimedia-div").mouseover(function() {
			if($(this).position().top < 110) {
				$(".float-window").removeClass("float-window-top").addClass("float-window-bottom");
				x_center = $(this).offset().left - (110 - $(this).width() / 2);
				y = $(this).offset().top + $(this).height() + 10;
			} else {
				$(".float-window").removeClass("float-window-bottom").addClass("float-window-top");
				x_center = $(this).offset().left - (110 - $(this).width() / 2);
				y = $(this).offset().top - 110;
			}

			console.log("x_center = " + x_center + ",y=" + y);

			$(".float-window").css({
				"display": "block",
				"top": y,
				"left": x_center
			});

		});

		$(".float-window").mouseover(function() {
			$(".float-window").css({
				"display": "block",
				"top": y,
				"left": x_center
			});
		});

		$(".float-window").mouseout(function() {
			$(".float-window").css({
				"display": "none"
			});
		});

		$(".multimedia-div").mouseout(function() {
			$(".float-window").css({
				"display": "none"
			});
		});
	</script>

</html>